<template>
	<view class="order" v-if="isItem" @click="$emit('handDetailsNavTo',item)">
		<view class="business_top">
			<view class="business_left">
				<view class="business_name">{{ item.businessName }}</view>
				<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26">
				</u-icon>
			</view>
			<view class="right_status" v-if="item.refundStatus">{{ orderRefundStatus(item.refundStatus) }}</view>
			<view class="right_status" v-else>{{ orderStatus(item.orderStatus) }}</view>
		</view>
		<view class="goods_item u-border-bottom u-border-top">
			<u-image borderRadius="20rpx" width="170rpx" height="170rpx" :src="item.goodsImg">
			</u-image>
			<view class="goods_msg">
				<view class="goods_title">
					{{item.goodsTitle}}
				</view>
				<view class="goods_attr">
					数量{{item.goodsNum}} {{item.goodsAttr}}
				</view>
				<view class="tips">
					七天无理由退款
				</view>
			</view>
		</view>
		<view class="pic_box" v-if="item.refundStatus">
			实付￥{{item.refundAmount||0}} 退款￥<text
				style="font-size: 38rpx;color: #FF365D;">{{item.refundAmount||0}}</text>
		</view>
		<view class="pic_box" v-else>
			总价￥{{item.goodsMoney}} 实付款￥<text style="font-size: 38rpx;">{{item.totalMoney}}</text>
		</view>
		<!-- // 1已完成 2待支付 3待发货 4待收货 5已取消 6售后订单 7待自提 , -->
		<view class="btns_box">
			<view class="btn" v-if="refund">
				<u-button size="mini" @click.stop="$emit('handleRefund',item)">退货/退款</u-button>
			</view>
			<view class="btn" v-if="item.refundStatus&&isAfterSaleBtn">
				<u-button size="mini" @click.stop="$emit('handleAfterSale',item)">售后详情</u-button>
			</view>
			<view class="btn" v-if="item.orderStatus==3">
				<u-button size="mini" @click.stop="$emit('turnShop',item)">转给商家</u-button>
			</view>
			<view class="btn" v-if="item.orderStatus==4">
				<u-button size="mini" type="primary" @click.stop="$emit('handleReceiving',item)">确认收货</u-button>
			</view>
			<view class="btn" v-if="item.orderStatus==2">
				<u-button size="mini" @click.stop="$emit('handlecancel',item)">取消订单</u-button>
			</view>
			<view class="btn" v-if="item.orderStatus==2">
				<u-button size="mini" @click.stop="$emit('handlePay',item)" type="primary">立即支付</u-button>
			</view>
			<view class="btn" v-if="item.orderStatus==1">
				<u-button size="mini" @click="$emit('delOrderInfo',item)">删除订单</u-button>
			</view>
			<view class="btn" v-if="item.orderStatus==1">
				<u-button size="mini" @click="$emit('handleComment',item)">评价</u-button>
			</view>
			<!-- <view class="btn" v-if="item.orderStatus==7">
				<u-button size="mini" type="primary">取货码</u-button>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			isAfterSaleBtn: {
				type: Boolean,
				default: true
			}

		},
		computed: {
			refund() {
				const num = [3, 4, 7]
				return num.includes(this.item.orderStatus)
			},
			isItem() {
				return JSON.stringify(this.item) !== '{}'
			},
			orderRefundStatus() {
				return function(type) {
					// 退款状态 1退款成功 2退款中 3退款失败
					switch (type) {
						case 1:
							return '退款成功'
							break;
						case 2:
							return '退款中'
							break;
						case 3:
							return '退款失败'
							break;
						default:
							break;
					}
				}
			},
			orderStatus() {
				return function(type) {
					// 1已完成 2待支付 3待发货 4待收货 5已取消 6售后订单 7待自提 ,
					switch (type) {
						case 1:
							return '已完成'
							break;
						case 2:
							return '待支付'
							break;
						case 3:
							return '待发货'
							break;
						case 4:
							return '待收货'
							break;
						case 5:
							return '已取消'
							break;
						case 6:
							return '售后订单'
							break;
						case 7:
							return '待自提'
							break;
						default:
							return '未知状态'
							break;
					}
				}
			}
		},
	}
</script>

<style scoped lang="scss">
	.btns_box {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;

		.btn {
			margin-left: 20rpx;

			&:first-child {
				margin-left: 0;
			}
		}

		// width: 100%;
	}

	.order {

		width: 710rpx;
		background-color: #ffffff;
		margin: 0 auto;
		margin-top: 20rpx;
		border-radius: 20rpx;
		padding: 20rpx;
		font-size: 28rpx;
		height: 100%;



		.pic_box {
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;

		}

		.goods_item {
			display: flex;
			margin-top: 10rpx;
			padding: 20rpx 0;

			.goods_msg {
				margin-left: 20rpx;
				display: flex;
				justify-content: space-between;
				flex-direction: column;

				.tips {
					color: $u-type-primary;
					font-size: 21rpx;
				}

				.goods_attr {
					font-size: 24rpx;
					color: #ABABAB;

				}

				.goods_title {
					font-size: 26rpx;
					color: #101010;
					@include ellipsisMultiline(1);

				}
			}

		}

		.business_top {
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-between;

			.right_status {
				color: $u-type-primary;
			}

			.business_left {
				display: flex;
				align-items: center;

				.business_name {
					margin-right: 10rpx;
					font-size: 32rpx;
					color: #101010;
					font-weight: 600;
				}
			}
		}

	}
</style>
